<template>
  <div class="km-tree" :style="treeHeight?'height:'+treeHeight: ''">
    <div class="recent-update" @click.stop="recent" v-show="type !== 'webchat'">
          <i class="iconfont icon-zxgx"></i>
          <span class="title">{{$t('km.recentUpdate')}}</span>
    </div>
    <div class="catalogue">
      <div class="tree-box">
        <ul class="tree" v-loading="loading">
         <item
           class="item"
           :kmType="KmType"
           :model="treeData"
           :hasManage="hasManage"
           :forbiddenDelete="forbiddenDelete"
           :type="type"
           @addChild="openDialog"
           @editChild="openDialog"
           @deleteChild="openDialog"
           @childId="childId"></item>
        </ul>
      </div>
    </div>
    <AddCatalogue ref="addChild" :pid="model._id" :kmType="KmType"></AddCatalogue>
    <EditCatalogue ref="editChild" :model="model" @updateCatalog = "updateChild" :kmType="KmType"></EditCatalogue>
    <DeleteCatalogue ref="deleteChild" :model="model" :kmType="KmType"></DeleteCatalogue>
  </div>
</template>
<script>
  import item from '@/components/business-modules/km/km-search/item.vue'
  import EditCatalogue from '@/components/business-modules/km/km-search/EditCatalogue.vue'
  import AddCatalogue from '@/components/business-modules/km/km-search/AddCatalogue.vue'
  import DeleteCatalogue from '@/components/business-modules/km/km-search/DeleteCatalogue.vue'
  import {isHasFunc} from '@/utils/m7Utils.js'
  export default {
    name: 'kmTree',
    props: ['KmType', 'type', 'manage', 'treeHeight'],
    data () {
      return {
        loading: true,
        treeData: {
          name: this.$t('km.viewCategory'),
          childs: [
          ],
          _id: '0'
        },
        dialogAddFormVisible: false,
        maxlimit: 3,
        hasManage: false,
        forbiddenDelete: false,
        model: {}
      }
    },
    computed: {
      refreshTree () {
        return this.$store.state.km.refreshTree
      }
    },
    methods: {
      childId (cid) {
        this.$emit('childId', cid)
      },
      openDialog (data) {
        this.model = data.val
        console.error(data,1122335);
        this.$nextTick(() => {
          this.$refs[data.event].open()
        })
      },
      updateChild: function (catalogItem) {
        let data = {
          _id: catalogItem._id,
          name: catalogItem.name,
          pid: catalogItem.type,
          order: catalogItem.order,
          showDepartment: catalogItem.showDepartment || [],
          showAgents:catalogItem.showAgents||[],
          kmType: this.KmType
        }
        if (data.showDepartment.length === 0) {
          delete data.showDepartment
        }
        if (data.showAgents.length === 0) {
          delete data.showAgents
        }
        this.$store.dispatch('updateCatalog', data).then((res) => {
          if (res.success) {
            if(res.message == 'no permission'){
              this.$message.error('没有权限,修改失败')
              this.dialogAddFormVisible = false
              return
            }  
            this.$message.success(this.$t('km.updateCatalogueSuccess'))
            this.$store.commit('km/REFRESH_TREE', Math.random())
            this.$store.commit('km/REFRESH_RIGHT', {type: 'init'})
          }
        })
      },
      recent () {
//        let data = {
//          kmType: this.KmType
//        }
        this.$router.push('/index/km/' + this.KmType + '/curupdate')
        this.$store.commit('km/REFRESH_RIGHT', {type: 'init'})
        // 解决异步导出知识库，点最近更新，再单击知识点，没有目录的bug
        this.$store.commit('km/REFRESH_TREE', Math.random())
//        this.$store.dispatch('queryRecentList', data).then(() => {
//          this.$router.push('/index/km/' + this.KmType + '/curupdate')
//        })
      },
      fetchData (flag) {
        // 从路由获取kmType，解决tab切换，从props中获取kmType不准问题
        let kmType = this.$route.path.split('/')[3] === 'inner' ? 'inner' : 'outer'
        let data = {
          kmType: flag || kmType,
          type: this.type
        }
        if (flag) { // 若是内部和外呼的切换去掉请求的mask
          data.flag = true
        }
        this.$store.dispatch('queryCatalogList', data).then((res) => {
          this.loading = false
          this.treeData.childs = res
          this.$emit('updateTreeData')
        })
      }
    },
    watch: {
      // 'refreshTree': 'fetchData',
      refreshTree () {
        this.fetchData()
      }
    },
    components: {
      item,
      EditCatalogue,
      AddCatalogue,
      DeleteCatalogue
    },
    beforeMount () {
      if (this.manage === 1) {
        this.hasManage = false
      } else {
        if (isHasFunc('func_km_config', this.$store.state.session.user)) {
          this.hasManage = true
        }
      }
      if (isHasFunc('func_not_remove_km_content', this.$store.state.session.user)) {
        this.forbiddenDelete = true
      }
      this.fetchData()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl";
  .km-tree
    height calc(100vh - 146px)
    overflow scroll
    padding-top 8px
    .recent-update
      margin-left 21px
      .iconfont
        color $c-main
        font-size 24px
    .catalogue
      margin 14px 0px 0px 16px
      color $cf-gray5
      .cata-head
        margin-bottom 10px
        .cata-icon
          width 23px
          height 23px
          border-radius 23px
          border 1px solid $c-main
          display inline-block
          .icon-chakanxinxi
            color $c-main
            line-height 25px
            padding 3px
        .cata-name
          font-size 16px
      .tree-box
        margin-left 4px
        padding-bottom 10px
        .addbn,.add
          display inline
  .title
    display inline-block
    font-size 14px
    color $cf-gray2
    font-weight 700
    cursor pointer
    vertical-align top
    padding-top  4px
</style>
